<template>

  <div class="app-container">
    <el-header>
      <el-row>
        <el-button type="primary">发明人：{{Info.inventorName}}</el-button>
        <el-button type="success">所属企业：{{Info.assigneestring}}</el-button>
      </el-row> 
    </el-header>

    <detail ref="mydetail"> </detail>
    <!-- 表单 -->
    <template>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        stripe
        :data="list"
        :cell-style="cellStyle"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          prop="Title"
          label="专利名称"
          align="center"
        >
        <!-- ><template slot-scope="scope">
            {{Title}}
        </template> -->
        </el-table-column>
        <el-table-column
         prop="ApplicationNumber[0]" 
        label="专利申请号" 
        width="340" 
        />
        
        <el-table-column 
        prop="ApplicationDate" 
        label="申请日期" 
        width="340" >
        </el-table-column>

        <el-table-column
          label="创新力"
          width="240">
          <template slot-scope="scope">
            <!-- 三个等号 判断值和类型 -->
            <!-- <span v-if="scope.row.cited_num==='1'" style="color:#F56C6C">高价值专利</span>
            <span v-else> </span> -->
            <!-- {{ scope.row.value_score }}
            {{ scope.row.value_score >= 10 ? "(高价值专利)" : "" }} -->
            钻石
          </template>
        </el-table-column>

        <el-table-column 
        label="司法风险" 
        width="150">
          <template slot-scope="scope">
            <!-- 三个等号 判断值和类型 -->
            <!-- <span v-if="scope.row.cited_num==='1'" style="color:#F56C6C">高价值专利</span>
            <span v-else> </span> -->
            <!-- {{ scope.row.value_score }}
            {{ scope.row.value_score >= 10 ? "(高价值专利)" : "" }} -->
            12
          </template>
        </el-table-column>
        <!-- <el-table-column prop="inventor" label="发明人(inventor)" width="200" />
        <el-table-column prop="publication_day" label="公开日" />
        <el-table-column prop="cited_num" label="被引数" /> -->

        <!-- <el-table-column prop="patentWords" label="关键词" width="340"/> -->

        <el-table-column label="操作" width="200" align="center">
          <!-- slot-scope获取整个表格 -->
          <template slot-scope="scope">
            <router-link :to="'/inventor/detail/' + inventorButton + '/'+ scope.row.Value">
              <el-button type="primary" size="mini" icon="el-icon-share">查看</el-button>
            </router-link>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-circle-plus"
              @click="removeDataById(scope.row.id)"
              >收藏</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页条 -->

      <!-- 分页   @符号是绑定一个即v-on -->
      <!-- current-page：当前页 page-size：每页记录数  total：一共有多少记录数 @current-change="getList"：分页方法-->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getInventorDetailList"
      />
    </template>
  </div>
</template>


<script>

export default {
  data() {
    //定义变量及初始值
    return {
      detailInfo: null,
      basic: null, //接口
      Info: {
          "kindCodeDesc":"FMZL,SYXX,WGZL,FMSQ"
      },//接口3:基于完整申请人丶发明人丶专利名称丶查询专利列表接口
      list:null, //列表渲染
      total:null,//总条数
      page:1,//当前页
      limit:10,//每页显示的记录数
    };
  },
  created() {
    //页面渲染之前执行，调用methods定义的方法
    //页面渲染钱调用getDetailInfo
    this.init();
    this.getInventorDetailList(this.Info);
  },
  methods: {
    init() {
      //步骤：1.获取路由路径中的id值
      this.Info.inventorName = this.$route.params.inventorname
      this.Info.assigneestring = this.$route.params.companyname;
    },
    getInventorDetailList(page = 1){
      console.log("this.page")
      console.log(this.page)
      this.$axios({
        url:'/api/PatentSearchV3/searchapplicantpatent',
        method:'POST',
        headers:{
          'Content-Type':'application/json'
        },data:this.Info
      }).then(res =>{
        this.list = res.data.Result;
        console.log(this.list)
        this.total = res.data.Paging.TotalRecords
      })
      }
  },
};
</script>


<style>
.el-container {
  display: block;
}
.title {
  font-size: 25px;
  font-weight: bold;
}

.info {
  font-size: 16px;
}

.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

/* .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
} */
.clearfix {
  display: flex;
}
.logo {
  width: 128px;
  height: 128px;
  margin-right: 10px;
}
.logo img {
  width: 100%;
}
.status {
  background-color: rgb(226, 225, 216);
  padding: 8px;
  border-radius: 8px;
  color: green;
  margin-left: 5px;
}
.box-card .body .key {
  /* color: rgb(48, 24, 155); */
}
.box-card .body .item {
  margin-right: 20px;
}

/* table样式 */
table.dataintable {
   border: 1px solid #888888;
   border-collapse: collapse;
   font-family: Arial,Helvetica,sans-serif;
   margin-top: 10px;
   width: 100%;
   text-align: center;
}
/* table.dataintable .title {
  background-color: #888888;
} */
table.dataintable th {
   background-color: #CCCCCC;
   border: 1px solid #888888;
   padding: 5px 15px 5px 5px;
   text-align: center;
   /* writing-mode: horizontal-tb; */
   width: 150px;
   height: 80px;
   /* vertical-align: baseline; */
}
table.dataintable td {
   background-color: #EFEFEF;
   border: 1px solid #AAAAAA;
   padding: 5px 15px 5px 5px;
   text-align: center;
   /* vertical-align: text-top; */
}
table.dataintable td:hover {
  background-color: #7e9ba3;
}

.box-card {
  width: 100%;
}
.border-card {
  /* float: left; */
  width: 800px;
  margin-left: -5px;
}
</style>